<template>
	<view class="client-record full box relative bg-primary flex-col">
		<view class="header-wrap">
			<view class="header-line-item">
				<view class="filter-item">
					<image src="/static/icon/search_icon.png" mode="aspectFill" class="filter-icon"></image>
					<input placeholder="关键词" />
				</view>
				<view class="filter-item">
					<image src="/static/icon/search_icon.png" mode="aspectFill" class="filter-icon"></image>
					<input placeholder="关键词" />
				</view>
				<view class="total-count">
					<text>共17条</text>
				</view>
			</view>
			<view class="header-line-item">
				<view class="filter-item">
					<image src="/static/icon/chevron_bottom.png" mode="aspectFill" class="filter-icon"></image>
					<text>设备型号</text>
				</view>
				<view class="filter-item">
					<image src="/static/icon/chevron_bottom.png" mode="aspectFill" class="filter-icon"></image>
					<text>设备状态</text>
				</view>
				<view class="search-btn">
					<text>搜索</text>
				</view>
			</view>
		</view>
		<view class="w-wrap">
			<view class="w-inner">
				<mescroll-uni @init="mescrollInit" :fixed="false" @down="downCallback" @up="upCallback">
					<view class="record-list">
						<view class="record-item">
							<view class="desc-item">
								<text>档案号：C-20250422-11760</text>
							</view>
							<view class="desc-item">
								<text>创建时间：2025-04-2216:37:08</text>
							</view>
							<view class="desc-item">
								<text>联系人：首善人家(18516809010)</text>
							</view>
							<view class="desc-item">
								<text>地址：北京通州区宋庄镇首善人家1号楼2单元1105</text>
							</view>
							<view class="device-wrap">
								<image class="device-img" mode="aspectFill"></image>
								<view class="device-info">
									<text class="info-item">设备型号：家庭水站(服务)</text>
									<text class="info-item">当前套餐：首充980套餐</text>
									<text class="info-item">设备编号：190381</text>
								</view>
								<view class="left-water">
									<text class="left-value">3688</text>
									<text class="left-lebel">剩余水量</text>
								</view>
							</view>
							<view class="footer-btns">
								<text class="btn-item btn-1">套餐明细</text>
								<text class="btn-item btn-2">升级水管家</text>
								<text class="btn-item btn-3">代充值</text>
							</view>
						</view>
					</view>
				</mescroll-uni>
			</view>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin],
		onLoad() {
			console.log('123');
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.client-record {
		.record-list {
			padding: 24rpx 20rpx;
			box-sizing: border-box;
			position: relative;

			.record-item {
				padding: 20rpx 32rpx;
				box-sizing: border-box;
				position: relative;
				background-color: #fff;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-bottom: 24rpx;

				&:last-child {
					margin-bottom: 0;
				}

				.footer-btns {
					margin-top: 14rpx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					.btn-item {
						padding: 10rpx 16rpx;
						background: #DCB787;
						border-radius: 32rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						line-height: 34rpx;
						margin-left: 24rpx;

						&.btn-2 {
							background: #3BB54E;
						}

						&.btn-3 {
							background: #3361F0;
						}
					}
				}

				.device-wrap {
					padding: 16rpx 32rpx;
					box-sizing: border-box;
					background: #F5F3F3;
					display: flex;
					align-items: center;

					.left-water {
						padding-left: 22rpx;
						display: flex;
						flex-flow: column;
						align-items: center;

						.left-value {
							font-weight: bold;
							font-size: 24rpx;
							color: #FF5252;
							letter-spacing: 1px;
						}

						.left-lebel {
							font-weight: 400;
							font-size: 22rpx;
							color: #606060;
							margin-top: 18rpx;
						}
					}

					.device-info {
						flex: 1;
						margin-left: 18rpx;
						display: flex;
						flex-flow: column;
						border-right: 2rpx solid #9C9C9C;

						.info-item {
							font-size: 26rpx;
							color: #515151;
							line-height: 42rpx;
						}
					}

					.device-img {
						width: 83rpx;
						height: 92rpx;
					}
				}

				.desc-item {
					font-size: 30rpx;
					color: #515151;
					line-height: 44rpx;
					margin-bottom: 4rpx;
				}
			}
		}

		.header-wrap {
			padding: 10rpx;
			box-sizing: border-box;
			position: relative;
			background-color: #fff;

			.header-line-item {
				display: flex;
				align-items: center;

				&:first-child {
					margin-bottom: 10rpx;
				}

				.total-count {
					flex: 1;
					text-align: center;
					font-size: 28rpx;
					color: #FF0000;
					line-height: 44rpx;
				}

				.search-btn {
					width: 116rpx;
					height: 60rpx;
					background: #3361F0;
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 26rpx;
					color: #FFFFFF;
					margin-left: auto;
				}

				.filter-item {
					width: 290rpx;
					height: 60rpx;
					background: #F4F4F4;
					border-radius: 30rpx 30rpx 30rpx 30rpx;
					display: flex;
					align-items: center;
					padding: 0 18rpx;


					&:first-child {
						margin-right: 10rpx;
					}

					.filter-icon {
						width: 32rpx;
						height: 32rpx;
					}
				}
			}
		}
	}
</style>